'use client';

import React from 'react';
import { Typography, Tag } from 'antd';
import { CloseOutlined } from '@ant-design/icons';

const { Text } = Typography;

export interface SelectedTimeSlotsProps {
  /** 已选择的时间段 */
  selectedSlots: string[];
  /** 周数据，用于显示日期名称 */
  weekData?: Array<{ date: string; dayName: string }>;
  /** 删除时间段回调 */
  onRemove?: (slot: string) => void;
  /** 是否只读 */
  readOnly?: boolean;
  /** 标题 */
  title?: string;
}

const SelectedTimeSlots: React.FC<SelectedTimeSlotsProps> = ({
  selectedSlots,
  weekData = [],
  onRemove,
  readOnly = false,
  title = '已选择时间段'
}) => {
  if (selectedSlots.length === 0) {
    return null;
  }

  // 获取日期名称
  const getDayName = (date: string) => {
    const dayData = weekData.find(d => d.date === date);
    return dayData?.dayName || date;
  };

  return (
    <div style={{ 
      marginTop: 16, 
      padding: '12px', 
      backgroundColor: '#e6f7ff', 
      borderRadius: 4,
      border: '1px solid #91d5ff'
    }}>
      <Text strong>{title}：</Text>
      <div style={{ marginTop: 8 }}>
        {selectedSlots.map(slot => {
          const [date, time] = slot.split('-');
          const dayName = getDayName(date);
          
          return (
            <Tag
              key={slot}
              closable={!readOnly && !!onRemove}
              onClose={() => onRemove?.(slot)}
              closeIcon={<CloseOutlined />}
              style={{ 
                margin: '2px 4px',
                backgroundColor: '#69cac3',
                color: '#fff',
                border: 'none'
              }}
            >
              {dayName} {time}
            </Tag>
          );
        })}
      </div>
      <div style={{ marginTop: 8, fontSize: '12px', color: '#666' }}>
        共选择 {selectedSlots.length} 个时间段
      </div>
    </div>
  );
};

export default SelectedTimeSlots; 